'use client'

import React from 'react'
import { 
  Box, 
  VStack, 
  HStack, 
  Text, 
  IconButton, 
  useColorModeValue,
  Badge,
  Divider
} from '@chakra-ui/react'
import { FiX, FiFileText, FiUser, FiFolder } from 'react-icons/fi'
import { FormattedContent } from '@/services/dragContentFormatter'

interface ContentPreviewProps {
  content: FormattedContent;
  onRemove?: () => void;
}

const ContentTypeIcon = ({ type }: { type: string }) => {
  switch (type) {
    case 'chapter':
      return <FiFileText />
    case 'character':
      return <FiUser />
    case 'folder':
      return <FiFolder />
    default:
      return <FiFileText />
  }
}

const ContentTypeBadge = ({ type }: { type: string }) => {
  const colorScheme = {
    chapter: 'blue',
    character: 'purple',
    folder: 'green'
  }[type] || 'gray'
  
  const label = {
    chapter: '章节',
    character: '角色',
    folder: '文件夹'
  }[type] || type
  
  return <Badge colorScheme={colorScheme}>{label}</Badge>
}

export const ContentPreview: React.FC<ContentPreviewProps> = ({
  content,
  onRemove
}) => {
  const bgColor = useColorModeValue('white', 'gray.800')
  const borderColor = useColorModeValue('gray.200', 'gray.600')
  
  return (
    <Box
      p={3}
      bg={bgColor}
      borderWidth={1}
      borderColor={borderColor}
      borderRadius="md"
      position="relative"
    >
      <HStack spacing={2} align="start">
        <Box color="gray.500" mt={1}>
          <ContentTypeIcon type={content.type} />
        </Box>
        
        <VStack align="start" spacing={1} flex={1}>
          <HStack spacing={2}>
            <Text fontWeight="medium">{content.title}</Text>
            <ContentTypeBadge type={content.type} />
          </HStack>
          
          <Text fontSize="sm" color="gray.500" noOfLines={2}>
            {content.summary}
          </Text>
        </VStack>
        
        {onRemove && (
          <IconButton
            aria-label="移除内容"
            icon={<FiX />}
            size="sm"
            variant="ghost"
            onClick={onRemove}
          />
        )}
      </HStack>
      
      {content.type === 'folder' && content.details.items && (
        <>
          <Divider my={2} />
          <VStack align="start" spacing={1}>
            {content.details.items.map((item: FormattedContent, index: number) => (
              <HStack key={index} spacing={2}>
                <ContentTypeIcon type={item.type} />
                <Text fontSize="sm">{item.title}</Text>
                <ContentTypeBadge type={item.type} />
              </HStack>
            ))}
          </VStack>
        </>
      )}
    </Box>
  )
} 